<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
     <!--引入的vue.js-->
     <script src="/js/vue.js"></script>
     <!--引入elementUI的css-->
     <link  type="text/css" rel="stylesheet" href="/css/index.css">
     <!--引入elementUI的js-->
     <script src="/js/index.js"></script>
     <!--引入axios.js-->
     <script src="/js/axios.min.js"></script>

</head>
<body>
<div id="app" class="app1">
<!--    搜索功能-->
    <el-row>
        <el-col :span="6"><el-input size="mini" v-model="searchForm.deptNo" placeholder="请输入部门编号"></el-input></el-col>
        <el-col :span="6"><el-input size="mini" v-model="searchForm.deptName" placeholder="请输入部门名称"></el-input></el-col>
        <el-col :span="6">
            <el-input size="mini" v-model="searchForm.loc" placeholder="请输入部门位置"></el-input>&nbsp;&nbsp;
        </el-col>

        <el-col :span="6"><el-button size="mini" icon="el-icon-search"  type="danger" @click="search">搜索</el-button>
            <el-button size="mini" type="primary" @click="toAdd">添加</el-button>
        </el-col>
    </el-row>


<!--    数据列表-->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="deptNo"
                label="部门编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="deptName"
                label="部门名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="loc"
                label="位置">
        </el-table-column>
    </el-table>

<!--    分页功能-->
    <!--分页  :相当于vue中v-bind 绑定属性  @相当于vue中v-on 绑定事件-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10, 15, 20, 25]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--添加部门对话框-->
    <el-dialog title="部门添加" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="部门名称" :label-width="formLabelWidth" prop="deptName">
                <el-input v-model="form.deptName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门位置" :label-width="formLabelWidth" prop="loc">
                    <el-input v-model="form.loc" autocomplete="off"></el-input>

            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button @click="resetForm('form')">重 置</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</div>
<!--    // 编写js代码-->
    <script>
        new Vue({
                el: '#app',
                data() {
                    return {
                        tableData: [], // 列表数据
                        currentPage:1, // 分页参数 ，第几页
                        pageSize: 10,// 分页参数 ，每页显示条数
                        total:50, // 分页参数，列表总条数
                        searchForm: {} ,// 搜索时的form对象
                        dialogFormVisible: false, // 添加部门对话框是否显示
                        form: {  // 提交数据的form对象
                            deptName: '', // 具体对象对应的属性
                            loc: '',
                        },
                        formLabelWidth: '120px', //label的宽度
                        rules:{
                            deptName: [
                                { required: true, message: '请输入部门名称', trigger: 'blur' },
                                { min: 3, max: 12, message: '长度在 3到 12 个字符', trigger: 'blur' }
                            ],
                            loc: [
                                { required: true, message: '请输入部门位置', trigger: 'blur' },
                                { min: 2, max: 13, message: '长度在 2 到 13 个字符', trigger: 'blur' }
                            ]
                        }
                    }
                },
                // 页面加载时执行
                created() {
                    this.loadData();
                },
            methods: {  // 当前页面中元素事件触发的方法，页面使用的函数/方法
                    loadData(){
                        // 定义
                        let _this = this;
                        axios.post('/dept/queryByPage', {
                            "pageNo": this.currentPage,
                            "pageSize": this.pageSize,
                            "data": this.searchForm})

                            .then(function (response) {
                                // 处理成功返回
                                console.log(response);
                                // 判断返回状态
                                if (response.data.code==200){
                                    _this.tableData  = response.data.data.list;
                                    _this.total = response.data.data.total;
                                }
                            })
                            .catch(function (error) {
                                // 处理错误返回
                                console.log(error);
                            })
                            .finally(function () {
                                // 总是会执行
                            });
                    },
                // 每页数量发生变化
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    //让每页显示数量变化
                    this.pageSize = val;
                    //调用加载数据方法
                    this.loadData();
                },
                // 第几页发生变化
                handleCurrentChange(val) {
                    console.log(`当前页: ${val}`);
                    this.currentPage = val;
                    this.loadData();
                },
                // 搜索功能
                search(){
                    this.loadData();
                },
                submitForm(f1) {
                    this.$refs[f1].validate((valid) => {
                        if (valid) {
                            alert('submit!');
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                // 重置表单
                resetForm(f2) {
                        this.$refs[f2].resetFields();
                },
                toAdd(){
                        this.dialogFormVisible = true;
                        this.$refs['form'].resetFields()
                }
            }
            }
        )

    </script>
</body>
</html>